<!DOCTYPE HTML>


<html>

    <title>表单设计</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    
    
    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
        	<link href="themes/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
   <script type="text/javascript" charset="utf-8" src="_src/editor.js"> </script>
    <!--浏览器判断模块-->
    <script type="text/javascript" charset="utf-8" src="_src/core/browser.js"> </script> 
    <!--工具函数包-->
    <script type="text/javascript" charset="utf-8" src="_src/core/utils.js"> </script>
    <!--UE采用的事件基类-->
    <script type="text/javascript" charset="utf-8" src="_src/core/EventBase.js"> </script> 
    <!--dtd html语义化的体现类-->
    <script type="text/javascript" charset="utf-8" src="_src/core/dtd.js"> </script>
    <!--Dom操作工具包-->
    <script type="text/javascript" charset="utf-8" src="_src/core/domUtils.js"> </script>
    <!--Range封装-->
    <script type="text/javascript" charset="utf-8" src="_src/core/Range.js"> </script>
    <!--选区集合 *-->
    <script type="text/javascript" charset="utf-8" src="_src/core/Selection.js"> </script>
    <!--编辑器主类，包含编辑器提供的大部分公用接口-->
    <script type="text/javascript" charset="utf-8" src="_src/core/Editor.js"> </script> 
    <!--维护编辑器一下默认的不在插件中的配置项-->
	<script type="text/javascript" charset="utf-8" src="_src/core/Editor.defaultoptions.js"> </script> 
	<script type="text/javascript" charset="utf-8" src="_src/core/loadconfig.js"> </script>
	<script type="text/javascript" charset="utf-8" src="_src/core/filterword.js"> </script>
	<script type="text/javascript" charset="utf-8" src="_src/core/node.js"> </script>
	<script type="text/javascript" charset="utf-8" src="_src/core/htmlparser.js"> </script>
    <!--<script type="text/javascript" charset="utf-8" src="_src/core/filternode.js"> </script>-->
    <script type="text/javascript" charset="utf-8" src="_src/core/plugin.js"> </script>
    <!--事件-->
    <script type="text/javascript" charset="utf-8" src="_src/core/keymap.js"> </script>
    <!--存储媒介封装-->
    <!--<script type="text/javascript" charset="utf-8" src="_src/core/localstorage.js"> </script>-->




  	<!--插入html字符串插件-->
  	<script type="text/javascript" charset="utf-8" src="_src/plugins/inserthtml.js"> </script>
    <!--UE表格操作类-->
    <script type="text/javascript" charset="utf-8" src="_src/plugins/table.core.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/plugins/table.cmds.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/plugins/table.action.js"> </script>
    
    <!--右键菜单-->
    <script type="text/javascript" charset="utf-8" src="_src/plugins/contextmenu.js"> </script>
    <!--编辑器默认的过滤转换机制-->
  	
  	<!--点击HTML  表格会变小  谷歌不会 ，浏览器兼容问题-->
  	<script type="text/javascript" charset="utf-8" src="_src/plugins/defaultfilter.js"> </script>
  	<!--插入html字符串插件-->
  	<script type="text/javascript" charset="utf-8" src="_src/plugins/inserthtml.js"> </script>
  	<!--自动排版-->
    <!--<script type="text/javascript" charset="utf-8" src="_src/plugins/autotypeset.js"> </script>-->
    <!--快捷键提交-->
    <!--<script type="text/javascript" charset="utf-8" src="_src/plugins/autosubmit.js"> </script>-->
    <!--背景插件，为UEditor提供设置背景功能-->
    <!--<script type="text/javascript" charset="utf-8" src="_src/plugins/background.js"> </script>-->
    
    <!--段落格式-->
    <!--<script type="text/javascript" charset="utf-8" src="_src/plugins/justify.js"> </script>
    
    <script type="text/javascript" charset="utf-8" src="_src/plugins/iframe.js"> </script>-->
    <!--涂鸦-->
    <!--<script type="text/javascript" charset="utf-8" src="_src/plugins/preview.js"> </script>-->
    <script type="text/javascript" charset="utf-8" src="_src/plugins/selectall.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/plugins/rowspacing.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/plugins/lineheight.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/plugins/insertcode.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/plugins/cleardoc.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/plugins/wordcount.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/plugins/dragdrop.js"> </script>
    <!--撤销上一次执行的命令-->
    <script type="text/javascript" charset="utf-8" src="_src/plugins/undo.js"> </script>
    
    
    <!--<script type="text/javascript" charset="utf-8" src="_src/plugins/copy.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/plugins/paste.js"> </script>-->
    <!--纯文本粘贴插件-->
    <!--<script type="text/javascript" charset="utf-8" src="_src/plugins/puretxtpaste.js"> </script>-->
    <!--有序列表,无序列表插件-->
    <!--<script type="text/javascript" charset="utf-8" src="_src/plugins/list.js"> </script>-->
    <!--源码编辑插件-->
    <script type="text/javascript" charset="utf-8" src="_src/plugins/source.js"> </script>
    <!--设置回车标签p或br-->
    <!--<script type="text/javascript" charset="utf-8" src="_src/plugins/enterkey.js"> </script>-->
    <!--处理特殊键的兼容性问题-->
    <script type="text/javascript" charset="utf-8" src="_src/plugins/keystrokes.js"> </script>
    <!--修复chrome下图片不能点击的问题，出现八个角可改变大小-->
    <!--<script type="text/javascript" charset="utf-8" src="_src/plugins/fiximgclick.js"> </script>-->
    <!--为非ie浏览器自动添加a标签-->
    <!--<script type="text/javascript" charset="utf-8" src="_src/plugins/autolink.js"> </script>-->
    <!--当输入内容超过编辑器高度时，编辑器自动增高-->
    <!--<script type="text/javascript" charset="utf-8" src="_src/plugins/autoheight.js"> </script>-->
    <!--悬浮工具栏-->
    <!--<script type="text/javascript" charset="utf-8" src="_src/plugins/autofloat.js"> </script>-->
    
   
    
    
    
    
    <script type="text/javascript" charset="utf-8" src="_src/ui/ui.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/ui/uiutils.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/ui/uibase.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/ui/popup.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/ui/tablepicker.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/ui/stateful.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/ui/button.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/ui/splitbutton.js"> </script>
    <!--菜单中使用了-->
    <script type="text/javascript" charset="utf-8" src="_src/ui/cellalignpicker.js"> </script>
    <!--导航条-->
    <script type="text/javascript" charset="utf-8" src="_src/ui/toolbar.js"> </script>
    <!--右键菜单的-->
    <script type="text/javascript" charset="utf-8" src="_src/ui/menu.js"> </script>
    <script type="text/javascript" charset="utf-8" src="_src/ui/tablebutton.js"> </script>
    <!--删除后没有编辑-->
    <script type="text/javascript" charset="utf-8" src="_src/adapter/editor.js"> </script>
    <!--图标-->
    <script type="text/javascript" charset="utf-8" src="_src/adapter/editorui.js"> </script>
    
    
    
    <!--<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>-->
    <style type="text/css">
        div{
            width:100%;
        }
    </style>
</head>

	<body>
		<div class="container">
			<div class="row">
				<div class="span2">
					<ul class="nav nav-list">
						<li class="nav-header">名称</li>

						<li>
							<a href="javascript:void(0);" ondragstart="getCurrentTest(this)" ondragend="setCurrentTest(this)" class="btn btn-link">学生id</a>
						</li>

						<li>
							<a href="javascript:void(0);" ondragstart="getCurrentTest(this)" ondragend="setCurrentTest(this)" class="btn btn-link">科目</a>
						</li>

						<li>
							<a href="javascript:void(0);" ondragstart="getCurrentTest(this)" ondragend="setCurrentTest(this)" class="btn btn-link">年度</a>
						</li>

						<li>
							<a href="javascript:void(0);" ondragstart="getCurrentTest(this)" ondragend="setCurrentTest(this)" class="btn btn-link">成绩</a>
						</li>

						<li>
							<a href="javascript:void(0);" ondragstart="getCurrentTest(this)" ondragend="setCurrentTest(this)" class="btn btn-link">备注</a>
						</li>

					</ul>

				</div>

				<div class="span1">
					<ul class="nav nav-list">
						<li class="nav-header">属性</li>

						<li>
							<a href="javascript:void(0);" ondragstart="getCurrentField(this)" ondragend="setCurrentField(this)" class="btn btn-link">stid</a>
						</li>

						<li>
							<a href="javascript:void(0);" ondragstart="getCurrentField(this)" ondragend="setCurrentField(this)" class="btn btn-link">subject</a>
						</li>

						<li>
							<a href="javascript:void(0);" ondragstart="getCurrentField(this)" ondragend="setCurrentField(this)" class="btn btn-link">year</a>
						</li>

						<li>
							<a href="javascript:void(0);" ondragstart="getCurrentField(this)" ondragend="setCurrentField(this)" class="btn btn-link">score</a>
						</li>

						<li>
							<a href="javascript:void(0);" ondragstart="getCurrentField(this)" ondragend="setCurrentField(this)" class="btn btn-link">note</a>
						</li>

					</ul>

				</div>
				<div class="span9">
					<script id="editor" type="text/plain" charset="utf-8" style="width: 800px; height: 500px;"></script>
				</div>
			</div>
		</div>
		<button onclick="getContent()">获得内容</button>
		<button onclick="submitForm()">提交内容</button>
		<script type="text/javascript">
			//拖拽的是什么位置的控件
			var where;
			//拖拽控件的值
			var textval = '';
			//实例化编辑器
			//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
			var ue = UE.getEditor('editor', {
				toolbars: [
					['source', //源码
						'inserttable', //插入表格
						'insertrow', //前插入行
						'insertcol', //前插入列
						'mergeright', //右合并单元格
						'mergedown', //下合并单元格
						'deleterow', //删除行
						'deletecol', //删除列
						'splittorows', //拆分成行
						'splittocols', //拆分成列
						'splittocells', //完全拆分单元格
						'deletecaption', //删除表格标题
						'inserttitle', //插入标题
						'mergecells', //合并多个单元格
						'deletetable', //删除表格
						'cleardoc', //清空文档
						'insertparagraphbeforetable', //"表格前插入行"
					]
				]
			});
			$("#ueditor_0").mouseover = function(event) {
				console.log(event);
			}

			ue.addListener('mouseover', mouseOverEvent);

			/*         ue.addListener('mouseout',mouseout);
			        function mouseout(){
			        	console.log("mouseout")
			        }
			        ue.addListener('mousemove',mousemove);
			        function mousemove(){
			        	console.log("mousemove")
			        }
			        
			        ue.addListener('click',click);
			        function click(){
			        	console.log("click")
			        }
			        ue.addListener('mousedown',mousedown);
			        function mousedown(){
			        	console.log("mousedown")
			        }
			        ue.addListener('mouseup',mouseup);
			        function mouseup(){
			        	console.log("mouseup")
			        } */

			function isEditorDisabled() {
				return ue.body.contentEditable === "false";
			}

			function mouseOverEvent(type, evt) {

				if(isEditorDisabled()) {
					return;
				}

				var me = this,
					tar = evt.target || evt.srcElement;

				currentTd = UE.dom.domUtils.findParentByTagName(tar, "td", true) || UE.dom.domUtils.findParentByTagName(tar, "th", true);
				if(textval != "") {
					$(currentTd).html(textval)
				}
				console.log("currentTd", currentTd);

			}

			ue.addListener('afterGetContent', function(editor) {
				console.log(2222222);
				setTimeout("tableChange(editor)", 0);
			});


			function getContent() {
				var arr = [];
				arr.push("使用editor.getContent()方法可以获得编辑器的内容");
				arr.push("内容为：");
				//获取一个iframe中的值td标签
				var tds = $("#ueditor_0").contents().find(".freeform td");
				//去除所有的width
				UE.utils.each(tds, function(td) {
					var temp = $(td).text();
					$(td).find("br").remove()
					$(td).find("a").remove()
					$(td).html(temp);

				});
				arr.push(UE.getEditor('editor').getContent());
				alert(arr.join("\n"));
			}

			function resttextval() {
				textval = "";
			}

			function getCurrentTest(e) {
				//获取text中的值
				where = "lable";
				textval = e.innerText;
			}

			function setCurrentTest(e) {
				//重置表单文本框内容
				setTimeout("resttextval()", 1);
			}

			function getCurrentField(e) {
				where = "field";
				textval = e.innerText;
			}

			function setCurrentField(e) {
				//重置表单文本框内容
				setTimeout("resttextval()", 1);
			}

			function tableChange(editor) {
debugger
				var tds = $("#ueditor_0").contents().find(".freeform td");
				if(tds.length > 0) {
					UE.utils.each(tds, function(td) {

						var temp = $(td).text();
						var val = temp.replace(String.fromCharCode(8203), "");

						if("" == val) {

							td.removeAttribute("class");
							td.removeAttribute("field");
							td.removeAttribute("valign");
							td.removeAttribute("style");
							//去掉多余的属性
							$(td).find("br").remove();
							$(td).find("a").remove();

						}

						if("lable" == where) {
							//获取文本的值

							if(val == textval) {
								//删除多余的样式
								td.removeAttribute("class");
								td.removeAttribute("field");
								td.removeAttribute("valign");
								td.removeAttribute("style");
								//重新添加样式
								td.setAttribute("class", "lable");
								//去掉多余的属性
								$(td).find("br").remove();
								$(td).find("a").remove();
								//重新赋值
								//td.value = temp;
								$(td).html(val);
							}

						} else if("field" == where) {

							if(val == textval) {
								//删除多余的样式
								td.removeAttribute("class");
								td.removeAttribute("field");
								td.removeAttribute("valign");
								td.removeAttribute("style");
								//重新添加样式
								td.setAttribute("class", "field");
								td.setAttribute("field", val);
								//去掉多余的属性
								$(td).find("br").remove();
								$(td).find("a").remove();
								//重新赋值
								$(td).html(val);
							}
						}
					});
					textval = "";
				}
			}

			function submitForm() {
				var json = {
					html: UE.getEditor('editor').getContent(),
				};
				$.ajax({
					cache: false,
					type: "post",
					url: waf.contextPath + "/waf/core/protoparam/format.bo",
					async: true,
					data: $.toJSON(json),
					contentType: 'application/json;charset=UTF-8',
					success: function(data) {
						alert("成功");
					},
					error: function(data) {
						alert("失败");
					}
				});
			}
		</script>
	</body>

</html>